<ng-container *ngIf="httpService.devType">
  <nz-layout class="layout" style="background: white">

    <!--    头部-->
    <!--    头部-->
    <!--    头部-->
    <!--    头部-->
    <nz-header
      [hidden]="activeUrl==='/register' || activeUrl === '/login'"
      class="vd-header"
      style="position:relative;
             width:100%;
             z-index: 100;
             padding: 0 12.75vw"
    >

      <div (click)="open()" class="logo"></div>


      <ul class="vd-userarea">
        <!-- <li *ngIf="!httpService.user?.vipFlag" class="vd-vipicon">会员</li> -->
        <ng-container *ngIf="!httpService.user; else logined">
          <!--          <li (click)="showModal($event)" style="margin-left: 25px;color:#333">登录</li>-->
          <li (click)="router.navigateByUrl('/login')" style="margin-left: 25px;color:#333">登录</li>
          <li>|</li>
          <li routerLink="register" style="color: #333">注册</li>
        </ng-container>
        <ng-template #logined>
          <li (click)="router.navigateByUrl('/usercenter')"
              (mouseover)="showtab = true"
              style="color: #333"
          >

            用户名：{{httpService.user?.mobile}}
          </li>

          <ng-container
            (click)="showtab=false"
            (mouseleave)="showtab=false"
            (mouseover)="showtab=true"
            *ngIf="httpService.user && showtab"
            style="background: white;position: relative">
            <div style="background: #fff;position: relative;top: -60px;"
                 (click)="showtab=false"
                 (mouseleave)="showtab=false"
                 (mouseover)="showtab=true"
            >
              <p (click)="showtab=false" [ngClass]="{'mb-navlist': !httpService.devType}" class="vd-popoveritem"
                 style="border-bottom: 1px solid #eee;"><a routerLink="/usercenter">个人中心</a></p>
              <p (click)="showtab=false" [ngClass]="{'mb-navlist': !httpService.devType}" class="vd-popoveritem"
                 style="border-bottom: 1px solid #eee;"><a routerLink="/passport">修改密码</a></p>
              <p (click)="showtab=false" [ngClass]="{'mb-navlist': !httpService.devType}" class="vd-popoveritem"><a
                (click)="logout()">退出登录</a></p>
            </div>

          </ng-container>
        </ng-template>

      </ul>

      <!-- 导航 -->
      <!-- 导航 -->
      <!-- 导航 -->
      <!-- 导航 -->
      <!-- 导航 -->
      <ul
        class="vd-header-nav"
        nz-menu
        [nzTheme]=""
        [nzMode]="'horizontal'"
        style="line-height: 64px;display: flex;justify-content: space-between;width: 35vw;font-size: 16px;border-width: 0">
        <li nz-menu-item
            routerLink="/index"
            style="outline: none;width: 68px;padding: 0!important;"
            [nzSelected]="activeUrl==='/index'"
            routerlinkactive="ant-menu-item-selected">首页</li>
        <li nz-menu-item
            routerLink="/development"
            style="outline: none;width: 68px;padding: 0!important;"
            [nzSelected]="activeUrl==='/development'"
            routerlinkactive="ant-menu-item-selected">系列课程</li>
        <li nz-menu-item
            routerLink="/profession"
            style="outline: none;width: 68px;padding: 0!important;"
            [nzSelected]="activeUrl==='/profession'"
            routerlinkactive="ant-menu-item-selected">职业菜单</li>
        <li nz-menu-item
            routerLink="/gaokao"
            style="outline: none;width: 68px;padding: 0!important;"
            [nzSelected]="activeUrl==='/gaokao'"
            routerlinkactive="ant-menu-item-selected">求职实习</li>
      </ul>
    </nz-header>

    <!-- 内容 -->
    <nz-content>
      <router-outlet></router-outlet>
    </nz-content>


    <!--广告位-->
    <!--<ng-container>-->
      <!--<div class="vd-wrapper">-->
        <!--<div class="vd-box">-->
          <!--<div class="vd-box-header li-ad-padding">-->

          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</ng-container>-->

    <div class="li-footer">
      <ul class="nav">
        <li
          (click)="router.navigateByUrl('/index')"
        >
          首页
        </li>
        <li
          (click)="router.navigateByUrl('/development')"
        >
          系列课程
        </li>
        <li
          (click)="router.navigateByUrl('/profession')"
        >
          职业菜单
        </li>
        <li
          (click)="router.navigateByUrl('/gaokao')"
        >
          求职实习
        </li>
        <!--<li>-->
          <!--活动中心-->
        <!--</li>-->
        <li
          *ngIf="httpService.user"
          (click)="router.navigateByUrl('/usercenter')"
        >
          个人中心
        </li>
      </ul>
      <p>
        Copyright © 2018-2019 职场司南 浙ICP备18039212号 &nbsp; &nbsp; <i nz-icon nzType="phone" nzTheme="outline"></i>&nbsp;0571-85383155
      </p>

      <img src="../assets/xixi.png" alt="">
    </div>
  </nz-layout>
</ng-container>


<!-- 移动端首页 -->
<ng-container *ngIf="!httpService.devType">
  <nz-layout class="layout" style="position: relative;min-height: 100vh;left: 0;top: 0;">
    <nz-header class="vd-header mb-header" style="position:fixed; width:100%;z-index: 1000;box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.1);padding: 0 16px;display: flex;align-items: center;justify-content: space-between">
      <div class="logo mb-logo" routerLink="/index" style="outline: none"></div>
      <!--<ul class="vd-userarea mb-headerCollapse" nz-popover nzTitle="" style="padding: 16px 0;" [nzContent]="contentTemplate"-->
      <!--[(nzVisible)]="popoverVisible" nzTrigger="click" nzPlacement="bottomRight">-->
      <!--<i nz-icon nzType="bars" nzTheme="outline"></i>-->
      <!--</ul>-->
      <img *ngIf="!caidan"
        (click)="caidan = true"
        alt="图标"
        class="daohangIcon"
        src="../assets/daohang.png" style="cursor: pointer"
      />
      <img *ngIf="caidan"
        (click)="caidan = false"
        alt="图标"
        src="../assets/close.png" style="cursor: pointer;width: 18px;height: 18px"
      />
    </nz-header>
    <nz-content style="margin-top:64px;background: #f2f2f2">
      <!-- <nz-carousel [nzEffect]="effect" [nzAutoPlay]="true">
        <div nz-carousel-content *ngFor="let index of bannerlist" [routerLink]="'../vd/'+index.courseId"
          style="cursor: pointer;">
          <div class="mb-banneritem" [ngStyle]="{'background-image': 'url('+ index.imageUrl +')'}"></div>
        </div>
      </nz-carousel> -->
      <router-outlet></router-outlet>
    </nz-content>
    <div style="height: 320px;width: 100vw"></div>
    <!--移动端底部-->
    <nz-footer class="mb-footer">
      <div class="mb-menu">
        <span routerLink="/index" (click)="popoverHiding()">首页</span>
        <span>|</span>
        <span routerLink="/development" (click)="popoverHiding()">系列课程</span>
        <span>|</span>
        <span routerLink="/profession" (click)="popoverHiding()">职业菜单</span>
        <span>|</span>
        <span routerLink="/zixun" (click)="popoverHiding()">求职实习</span>
        <span *ngIf="httpService.user">|</span>
        <span *ngIf="httpService.user" routerLink="/usercenter" (click)="popoverHiding()">个人中心</span>
      </div>
      <p>Copyright © 2018-2019 职场司南 浙ICP备18039212号</p>
      <div class="telBox">
        <img src="../assets/tel.png" alt="电话">
        <span>0571-85383155</span>
      </div>
      <div class="qrCode">
        <img src="../assets/qrCode.png" alt="微信公众号二维码">
      </div>
      <p>微信公众号</p>
    </nz-footer>
  </nz-layout>
</ng-container>

<div id="pay-wrapper" style="display: none;"></div>
<ul class="vd-fixed">
  <li *ngIf="!httpService.user?.vipFlag" (click)="httpService.openPayModal()">
    <img src="../assets/user-vip.png">成为会员
  </li>
  <li (click)="call()" style="border-top: 1px solid #eee;">
    <img src="../assets/share.png">分享
  </li>
</ul>
<!-- 登录弹窗 -->
<!--<nz-modal [(nzVisible)]="httpService.loginModal" [nzTitle]="" [nzFooter]="null" nzClassName="loginModal" [nzWidth]="320"-->
          <!--[nzBodyStyle]="{padding: 0}" (nzOnCancel)="closeModal()">-->
  <!--<div class="vd-login">-->
    <!--<h1>登录</h1>-->
    <!--<br/>-->
    <!--<form nz-form [formGroup]="validateForm" class="login-form" style="margin: 0 auto;" (ngSubmit)="login()">-->
      <!--<nz-form-item>-->
        <!--<nz-form-control>-->
          <!--<nz-input-group [nzPrefix]="prefixUser">-->
            <!--<input type="text" nz-input formControlName="username" placeholder="请输入您的手机号"/>-->
          <!--</nz-input-group>-->
          <!--<nz-form-explain *ngIf="validateForm.get('username')?.dirty && validateForm.get('username')?.errors">-->
            <!--请输入您的手机号!-->
          <!--</nz-form-explain>-->
        <!--</nz-form-control>-->
      <!--</nz-form-item>-->
      <!--<nz-form-item>-->
        <!--<nz-form-control>-->
          <!--<nz-input-group [nzPrefix]="prefixLock">-->
            <!--<input type="password" nz-input formControlName="password" placeholder="请输入您的密码"/>-->
          <!--</nz-input-group>-->
          <!--<nz-form-explain *ngIf="validateForm.get('password')?.dirty && validateForm.get('password')?.errors">-->
            <!--请输入您的密码-->
          <!--</nz-form-explain>-->
        <!--</nz-form-control>-->
      <!--</nz-form-item>-->
      <!--<nz-form-item style="padding-bottom: 0;">-->
        <!--<nz-form-control>-->
          <!--<button nz-button class="login-form-button" [nzType]="'primary'" [disabled]="validateForm.invalid">登录</button>-->
          <!--<a routerLink="/register" (click)="closeModal()">去注册</a>-->
          <!--<a class="login-form-forgot" routerLink="/passport" (click)="closeModal()">忘记密码</a>-->
        <!--</nz-form-control>-->
      <!--</nz-form-item>-->
    <!--</form>-->
  <!--</div>-->
<!--</nz-modal>-->
<ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
<ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>
<!-- 个人中心 -->
<!--<ng-template #contentTemplate>-->
<!--菜单弹框-->
<div (click)="caidan = false" *ngIf="!httpService.devType && caidan" style="position: fixed;right: 20px;top: 50px; background: white;z-index: 99999999;border: 1px solid #f2f2f2">
  <ng-container *ngIf="!httpService.devType">
    <p class="vd-popoveritem mb-navlist" routerLink="/index" (click)="popoverHiding()"
       style="border-bottom: 1px solid #eee;"><a>首页</a></p>
    <p class="vd-popoveritem mb-navlist" routerLink="/development" (click)="popoverHiding()"
       style="border-bottom: 1px solid #eee;"><a>系列课程</a></p>
    <p class="vd-popoveritem mb-navlist" routerLink="/profession" (click)="popoverHiding()"
       style="border-bottom: 1px solid #eee;"><a>职业菜单</a></p>
    <p class="vd-popoveritem mb-navlist" routerLink="/zixun" (click)="popoverHiding()"
       style="border-bottom: 1px solid #eee;"><a>求职实习</a></p>
  </ng-container>
  <ng-container *ngIf="httpService.user">
    <p class="vd-popoveritem" [ngClass]="{'mb-navlist': !httpService.devType}" (click)="popoverHiding()"
       style="border-bottom: 1px solid #eee;"><a routerLink="/usercenter">个人中心</a></p>
    <p class="vd-popoveritem" [ngClass]="{'mb-navlist': !httpService.devType}" (click)="popoverHiding()"
       style="border-bottom: 1px solid #eee;"><a routerLink="/passport">修改密码</a></p>
    <p class="vd-popoveritem" [ngClass]="{'mb-navlist': !httpService.devType}" (click)="popoverHiding()"><a
      (click)="logout()">退出登录</a></p>
  </ng-container>
  <ng-container *ngIf="!httpService.devType && !httpService.user">
    <!--<p class="vd-popoveritem mb-navlist" style="border-bottom: 1px solid #eee;"-->
    <!--(click)="popoverHiding();showModal($event)">登录</p>-->
    <p class="vd-popoveritem mb-navlist" style="border-bottom: 1px solid #eee;" routerLink="/login" (click)="popoverHiding()"><a
      routerLink="/passport">登录</a></p>
    <p class="vd-popoveritem mb-navlist" routerLink="/register" (click)="popoverHiding()"><a
      routerLink="/passport">注册</a></p>
  </ng-container>
</div>
<!--</ng-template>-->


<!-- 充值弹窗 -->
<nz-modal
  [(nzVisible)]="httpService.vipModal"
  [nzTitle]=""
  [nzFooter]="null"
  nzClassName="loginModal"
  [nzWidth]="360"
  [nzBodyStyle]="{padding: 0}" (nzOnCancel)="closeVipModal()">
  <div class="vd-login li-login">
    <h1>加入职场司南</h1>
    <br/>
    <p class="price"><span>{{httpService.price}}</span>&nbsp; 元 &nbsp; /24个月</p>

    <div class="pay-ways">
      <div class="pay-way" [ngClass]="{'selected':payType === '支付宝'}" (click)="changePayType('支付宝')">
        <img src="../assets/alipay.svg" alt="">
        <span>支付宝</span>
      </div>

      <div *ngIf="httpService.devType" class="pay-way" [ngClass]="{'selected':payType === '微信'}" (click)="changePayType('微信')">
        <img src="../assets/wx.svg" alt="">
        <span>微信</span>
      </div>
      <div *ngIf="!httpService.devType && !isWel" class="pay-way" [ngClass]="{'selected':payType === 'mobile'}" (click)="changePayType('mobile')">
        <img src="../assets/wx.svg" alt="">
        <span>微信</span>
      </div>

      <div *ngIf="!httpService.devType && isWel" class="pay-way" [ngClass]="{'selected':payType === 'wechat'}" (click)="changePayType('wechat')">
        <img src="../assets/wx.svg" alt="">
        <span>微信</span>
      </div>
    </div>

    <div class="aui-flex clearfix selected" *ngIf="httpService.coupon">
      <div class="aui-price-nub">
        <div class="aui-digit">
          <h2 style=" line-height: 52px !important;">{{httpService.coupon.price}}  <span>元</span></h2>
        </div>
      </div>
      <div class="aui-flex-box">
        <h2 style="padding-top: 0 !important;">用户分享专属优惠券</h2>
        <div class="checkicon">
          <i nz-icon [nzType]="'check-circle'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#ff5758'"></i>
        </div>
      </div>
    </div>

    <div class="promoCode" style="margin-bottom: 10px;width: 100%">
      <input #input="ngModel" style="width: 100%;padding: 10px" [ngClass]="{'error-border': getPromoCodeStatus(input)}" type="text" [(ngModel)]="promoCode" (input)="inputPromoCode()" (change)="checkPromoCode()" maxlength="16" placeholder="请输入优惠码"/>
    </div>

    <div class="price-detail" style="width: 100%">
      <p *ngIf="httpService.price && (httpService.coupon || promoCode)">原价： <font>￥ <span id="price">{{httpService.price}}</span></font></p>
      <p *ngIf="httpService.coupon">优惠券：<font>- ￥ <span id="price">{{httpService.coupon.price}}</span></font></p>
      <p *ngIf="paybtn && promoCode">优惠码：<font>- ￥ <span id="price">{{promoCodePrice}}</span></font></p>
      <p>合计：<font>￥ <span id="price">{{getPrice()}}</span></font></p>
    </div>
    <button nz-button nzType="primary" [disabled]="!paybtn" (click)="httpService.pay(payType,promoCode, httpService.coupon)" nzBlock>去支付</button>
  </div>
</nz-modal>
<!-- <nz-modal [(nzVisible)]="shareModal" [nzStyle]="{ top: '50%', 'left': '50%', 'margin': '0', 'transform': 'translate(-50% -50%)', 'padding': '0' }" [nzTitle]="" [nzFooter]="null" nzClassName="loginModal" [nzWidth]="320" -->

<!--// 分享 弹窗-->
<nz-modal [(nzVisible)]="httpService.shareModal"
          [nzStyle]="{'margin': '0 auto'}"
          [nzTitle]="" [nzFooter]="null"
          nzClassName="loginModal"
          [nzWidth]="305"
          [nzBodyStyle]="{padding: '30px'}"
          (nzOnCancel)="closeShareModal()">
  <!-- <div class="bg-share"> -->
  <!--
  <a class="load_btn" (click)="loadSharePic()">
    <div class="download_btn"></div>
    保存到相册
  </a> -->
  <img id="qrcode" [src]="httpService.user?.qrCodeImageUrl" alt="">
  <!--<p style="text-align: center;">邀请好友成功，即可获得现金奖励</p>-->
  <button id="load_btn" (click)="loadSharePic()" nz-button nzType="default" nzShape="round">保存二维码</button>
  <!-- </div> -->
</nz-modal>


<!--// li 微信支付 扫码弹窗-->
<nz-modal [(nzVisible)]="httpService.weixinShow"
          [nzStyle]="{'margin': '0 auto'}"
          [nzTitle]="" [nzFooter]="null"
          nzClassName="loginModal"
          [nzWidth]="305"
          [nzBodyStyle]="{padding: '30px'}"
          (nzOnCancel)="httpService.weixinShow = false">
  <img id="qrcode" [src]="httpService.weixinImgUrl" alt="">
  <p style="text-align: center;">扫码支付</p>
  <!-- </div> -->
</nz-modal>

<nz-modal (nzOnCancel)="httpService.quanxian = false"
          [(nzVisible)]="httpService.quanxian"
          [nzBodyStyle]="{padding: '30px'}" [nzFooter]="null"
          [nzStyle]="{'margin': '0 auto'}"
          [nzTitle]=""
          [nzWidth]="305"
          nzClassName="loginModal">

  <h3 style="text-align: center;">权限不足</h3>

  <div style="width:80px;margin: 15px auto">

    <button (click)="httpService.gotoLogi()" nz-button nzType="primary" style="margin: 0 auto">去登录</button>
  </div>

  <!-- </div> -->
</nz-modal>


<div style="display: none;">
  <img id="code_bg" style="display: none;" src="../assets/invite_bg.jpg" alt="">
  <canvas id="can1" width="1024" height="1818"></canvas>
</div>
